<!-- 输入关键词自动采集对应热点内容生成对应视频 -->
<template>
  <div class="min-h-screen  text-white py-8">
    <div class="mx-auto px-6">
      <!-- 步骤进度条 -->
      <div class="mb-12">
        <div class="flex justify-between items-center relative">
          <div class="absolute left-[5%] right-[5%] top-[35%] h-0.5 bg-gray-700 "></div>
          <div class="absolute left-[5%] right-[5%] top-[35%] h-0.5 ">
            <div class="h-full bg-green-500 transition-all duration-300" :style="`width: ${(currentStep / (steps.length - 1)) * 100}%`"></div>
          </div>
          <div v-for="(step, index) in steps" :key="index"
               class="flex flex-col items-center relative z-10">
            <div :class="`w-10 h-10 rounded-full flex items-center justify-center mb-2 border-2 transition-all duration-300
${currentStep > index ? 'bg-green-500 border-green-500' : currentStep === index ? 'bg-[#2468F2] border-[#2468F2]' : 'bg-gray-700 border-gray-700'}`">
              <i v-if="currentStep > index" class="fas fa-check"></i>
              <span v-else>{{ index + 1 }}</span>
            </div>
            <span class="text-sm transition-colors duration-300" :class="currentStep === index ? 'text-white' : 'text-gray-400'">
{{ step }}
</span>
          </div>
        </div>
      </div>
      <!-- 表单内容区 -->
      <div class="bg-gray-800 rounded-lg p-8 mb-8">

        <div v-if="currentStep === 0">
          <div class="mb-6">
            <label class="block mb-2">任务名称</label>
            <input v-model="formData.taskName"
                   class="w-full bg-gray-700 rounded-lg px-4 py-2 border-none text-white"
                   :class="{'border-red-500': errors.taskName}"
                   placeholder="请输入任务名称"/>
            <span v-if="errors.taskName" class="text-red-500 text-sm mt-1">{{ errors.taskName }}</span>
          </div>
          <div class="mb-6">
            <label class="block mb-2">采集关键词</label>
            <input v-model="formData.keywords"
                   class="w-full bg-gray-700 rounded-lg px-4 py-2 border-none text-white"
                   :class="{'border-red-500': errors.keywords}"
                   placeholder="请输入关键词"/>
<!--            <t-textarea v-model="formData.keywords"-->
<!--                      :autosize="true"-->
<!--                   class="w-full bg-gray-700 rounded-lg px-4 py-2 border-none text-white"-->
<!--                   :class="{'border-red-500': errors.keywords}"-->
<!--                   placeholder="请输入关键词,多个关键词换行输入"/>-->
            <span v-if="errors.keywords" class="text-red-500 text-sm mt-1">{{ errors.keywords }}</span>
          </div>
          <div class="mb-6">
            <label class="block mb-2">自定义视频话题</label>
            <input v-model="formData.zdy_video_keywords"
                   class="w-full bg-gray-700 rounded-lg px-4 py-2 border-none text-white"
                   placeholder="请输入自定义视频话题,示例:#医美 #购物"/>
          </div>
          <div class="mb-6">
            <label class="block mb-2">文案筛选配置</label>
            <t-select
                v-model="formData.textSelect"
                :options="textSelect"
                placeholder="请选择"
            />
          </div>

        </div>
        <!-- 第二步：AI改写设置 -->
          <div v-if="currentStep === 1">
            <!-- 顶部通栏模型选择 -->
<!--            <div class="mb-6">-->
<!--              <label class="block mb-2">模型选择</label>-->
<!--              <div class="relative">-->
<!--                <button @click="toggleModelDropdown"-->
<!--                        class="w-full bg-gray-700 rounded-lg px-4 py-2 text-left flex justify-between items-center">-->
<!--                  {{ formData.selectedModel || '请选择AI模型' }}-->
<!--                  <i class="fas fa-chevron-down"></i>-->
<!--                </button>-->
<!--                <div v-if="showModelDropdown"-->
<!--                     class="absolute top-full left-0 w-full mt-1 bg-gray-700 rounded-lg shadow-lg z-10">-->
<!--                  <div v-for="model in aiModels"-->
<!--                       :key="model"-->
<!--                       @click="selectModel(model)"-->
<!--                       class="px-4 py-2 hover:bg-gray-600 cursor-pointer">-->
<!--                    {{ model }}-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->

            <!-- 双列提示词布局 -->
            <div class="grid grid-cols-2 gap-6">
              <!-- 左侧系统提示词 -->
              <div>
                <div class="mb-6">
                  <label class="block mb-2">系统提示词</label>
                  <div style="margin-bottom: 5px;display: flex;justify-content: end;">
                    <t-space>
                      <t-button theme="primary" size="small" @click="getPromptList(1)">从提示词库中插入</t-button>
                      <t-button theme="primary" size="small" @click="showSavePromtpt(1,formData.systemPrompt)" >保存提示词</t-button>
                    </t-space>
                  </div>
                  <div class="relative">
                    <textarea v-model="formData.systemPrompt"
                              class="w-full bg-gray-700 rounded-lg px-4 py-2 border-none text-white h-80"
                              :class="{'border-red-500': errors.systemPrompt}"
                              placeholder="请输入系统提示词" style="color: #9DE505"></textarea>
                    <span v-if="errors.systemPrompt" class="text-red-500 text-sm mt-1">{{ errors.systemPrompt }}</span>
                    <div class="absolute right-2 top-2">
<!--                      <span class="text-sm text-gray-400">{{ formData.systemPrompt.length }}/1000</span>-->
                    </div>
                  </div>
                  <div class="mt-2">
                    <label class="block mb-2">系统变量</label>
                    <div class="flex flex-wrap gap-2">
                      <button v-for="variable in systemVariables"
                              :key="variable"
                              @click="insertSystemVariable(variable)"
                              class="px-3 py-1 bg-blue-900 rounded-lg text-sm whitespace-nowrap">
                        {{ variable }}
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 右侧用户提示词 -->
              <div>
                <div class="mb-6">
                  <label class="block mb-2">用户提示词</label>
                  <div style="margin-bottom: 5px;display: flex;justify-content: end;">
                    <t-space>
                      <t-button theme="primary" size="small" @click="getPromptList(2)">从提示词库中插入</t-button>
                      <t-button theme="primary" size="small" @click="showSavePromtpt(2,formData.userPrompt)">保存提示词</t-button>
                    </t-space>
                  </div>

                  <div class="relative">
                    <textarea v-model="formData.userPrompt"
                              class="w-full bg-gray-700 rounded-lg px-4 py-2 border-none text-white h-80"
                              :class="{'border-red-500': errors.userPrompt}"
                              placeholder="请输入用户提示词" style="color: #9DE505"></textarea>
                    <span v-if="errors.userPrompt" class="text-red-500 text-sm mt-1">{{ errors.userPrompt }}</span>
                    <div class="absolute right-2 top-2">
<!--                      <span class="text-sm text-gray-400">{{ formData.userPrompt.length }}/1000</span>-->
                    </div>
                  </div>
                  <div class="mt-2">
                    <label class="block mb-2">系统变量</label>
                    <div class="flex flex-wrap gap-2">
                      <button v-for="variable in systemVariables"
                              :key="variable"
                              @click="insertUserVariable(variable)"
                              class="px-3 py-1 bg-blue-900 rounded-lg text-sm whitespace-nowrap">
                        {{ variable }}
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        <!-- 第三步：音频配置 -->
        <div v-if="currentStep === 2">
          <div class="mb-6">
            <label class="block mb-2">清晰度选择</label>
            <div class="relative">
              <t-select
                  v-model="formData.selectedAudioPlatform"
                  :options="audioPlatforms"
                  placeholder="请选择"
                  @change="selectAudioPlatform"
              />
              <span v-if="errors.selectedAudioPlatform" class="text-red-500 text-sm mt-1">{{ errors.selectedAudioPlatform }}</span>
            </div>
          </div>
          <div class="mb-6">
            <label class="block mb-2">声音选择</label>
            <div class="relative">
              <t-select
                  v-model="formData.selectedVoice"
                  :options="platformVoices"
                  placeholder="请选择"

              />
              <span v-if="errors.selectedVoice" class="text-red-500 text-sm mt-1">{{ errors.selectedVoice }}</span>
            </div>
          </div>
          <div class="mb-6" v-if="platformVoicesModel.length>0">
            <label class="block mb-2">模型选择</label>
            <div class="relative">
              <t-select
                  v-model="formData.selectedVoiceModel"
                  :options="platformVoicesModel"
                  placeholder="请选择"

              />
              <span v-if="errors.selectedVoiceModel" class="text-red-500 text-sm mt-1">{{ errors.selectedVoiceModel }}</span>
            </div>
          </div>

<!--          <div class="space-y-6">-->
<!--            <div>-->
<!--              <label class="block mb-2">音量调节</label>-->
<!--              <div class="flex items-center gap-4">-->
<!--                <span class="text-sm">0</span>-->
<!--                <input type="range" v-model="formData.volume" min="0" max="100"-->
<!--                       class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"/>-->
<!--                <span class="text-sm">100</span>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div>-->
<!--              <label class="block mb-2">语速调节</label>-->
<!--              <div class="flex items-center gap-4">-->
<!--                <span class="text-sm">0.5x</span>-->
<!--                <input type="range" v-model="formData.speed" min="50" max="200" step="10"-->
<!--                       class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"/>-->
<!--                <span class="text-sm">2.0x</span>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->


        </div>
        <!-- 第四步：视频配置 -->
        <div v-if="currentStep === 3">
          <div class="mb-6">
            <label class="block mb-2">清晰度选择</label>
            <div class="relative">

              <t-select
                  v-model="formData.selectedVideoPlatform"
                  :options="videoPlatforms"
                  placeholder="请选择"
                  @change="selectVideoPlatform"
              />
              <span v-if="errors.selectedVideoPlatform" class="text-red-500 text-sm mt-1">{{ errors.selectedVideoPlatform }}</span>
            </div>
          </div>
          <div>
            <label class="block mb-2">视频模板</label>
            <div class="relative">

              <t-select
                  v-model="formData.selectedVideo"
                  :options="platformVideos"
                  placeholder="请选择"
              />
              <span v-if="errors.selectedVideo" class="text-red-500 text-sm mt-1">{{ errors.selectedVideo }}</span>
            </div>
          </div>
        </div>

        <!-- 第五步：发布配置 -->
        <div v-if="currentStep === 4">
          <t-space style="margin-bottom: 10px;"  size="24px">
<!--            <t-checkbox v-model="isAutoFb"> 自动剪辑发布 </t-checkbox>-->
            <t-checkbox v-model="isAutoJjjb"> 包装剪辑 </t-checkbox>
            <t-checkbox  v-model="isAutoFbjb"> 发布 </t-checkbox>
          </t-space>
          <div v-if="isAutoJjjb || isAutoFbjb">

            <t-card   v-for="(item,key) in schedule" v-bind:key="key" style="margin-bottom: 20px">
              <div class="flex justify-between items-center">
                <div  style="width: 100%; margin-right: 20px;">
                  <t-row  :gutter="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }" >
                    <t-col :span="12">
                      <t-form-item label="选择设备" >
                        <t-tree-select
                            filterable
                            :data="devices"
                            v-model="item.target_device"
                            multiple
                            placeholder="请选择"
                        >
                        </t-tree-select>
                      </t-form-item>
                    </t-col>
                    <t-col :span="12" v-if="isAutoFbjb">
                      <t-form-item label="发布平台" >
                        <t-select
                            v-model="item.platform"
                            multiple
                            :options="platforms"
                            placeholder="请选择"
                        />
                      </t-form-item>
                    </t-col>

                  </t-row>
                </div>
              </div>

              <div style="width: 100%; margin-right: 20px;">
                <t-card  >
                  <t-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }" >
                    <t-col :span="12" >
                      <t-row :gutter="16"  v-for="(date,t) in schedule_task" v-bind:key="t">
                        <t-col :span="11" >
                          <t-form-item label="执行时段" labelAlign="left" labelWidth="100">
                            <t-time-range-picker clearable  v-model="schedule_task[t]" style="width: 100%"></t-time-range-picker>
                          </t-form-item>
                        </t-col>
                        <t-col :span="1" style="padding-right: 20px" v-if="t>0" >
                          <t-button theme="danger" @click="removeTaskTime(t)" >
                            <template #icon><DeleteIcon /></template>
                          </t-button>
                        </t-col>
                      </t-row>
                      <t-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }"   >
                        <t-col :span="12" style="text-align: center" >
                          <t-button theme="primary" @click="addTaskTime()">
                            <template #icon><add-icon />新增时段</template>
                          </t-button>
                        </t-col>
                      </t-row>
                    </t-col>

                  </t-row>
                </t-card>

              </div>

            </t-card>
          </div>
          <div v-else>

            <div class="mb-6">
              <label class="block mb-2">产出数量</label>
              <input v-model="formData.outCount"
                     type="number"
                     class="w-full bg-gray-700 rounded-lg px-4 py-2 border-none text-white"
                     :class="{'border-red-500': errors.outCount}"
                     placeholder="请输入产出数量"/>
              <span v-if="errors.outCount" class="text-red-500 text-sm mt-1">{{ errors.outCount }}</span>
            </div>


          </div>


        </div>


        <!-- 第五步：其他配置 -->
<!--        <div v-if="currentStep === 4">-->
<!--          <div class="mb-6">-->
<!--            <label class="block mb-2">其他设置</label>-->
<!--            <textarea v-model="formData.otherConfig"-->
<!--                      class="w-full bg-gray-700 rounded-lg px-4 py-2 border-none text-white h-32"-->
<!--                      placeholder="请输入其他配置"></textarea>-->
<!--          </div>-->
<!--        </div>-->
      </div>
      <!-- 底部操作栏 -->
      <div class="flex justify-between">
        <button @click="cancel"
                class="px-6 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 !rounded-button whitespace-nowrap">
          取消
        </button>
        <div class="flex gap-4">
          <button v-if="currentStep > 0"
                  @click="prevStep"
                  class="px-6 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 !rounded-button whitespace-nowrap">
            上一步
          </button>
          <button @click="nextStep"
                  class="px-6 py-2 bg-[#2468F2] rounded-lg hover:bg-blue-600 !rounded-button whitespace-nowrap">
            {{ currentStep === steps.length - 1 ? '完成' : '下一步' }}
          </button>
        </div>
      </div>
    </div>
  </div>
  <t-dialog
      attach="body"
      placement="center"
      header="选择提示词"
      v-model:visible="dialogPromptList"
      :footer="false"
  >
    <div>
      <t-space v-if="promptList.length>0">
        <t-tag style="cursor: pointer;" @click="insetPrompt(item.content)"  @close="delPrompt(index,item.id)" theme="primary" closable v-for="(item,index) in promptList" v-bind:key="index">{{item.title}}</t-tag>
      </t-space>
      <t-tag   v-if="promptList.length==0">暂无数据</t-tag>
    </div>
  </t-dialog>
  <t-dialog
      placement="center"
      header="保存提示词"
      v-model:visible="dialogSavePrompt"
      :on-confirm="savePrompt"
      attach="body"
  >
    <t-form>
      <t-form-item labelAlign="left" label="标题"  >
        <t-input placeholder="请输入提示词标题" v-model="promptTitle" />
      </t-form-item>
    </t-form>
  </t-dialog>
</template>
<script  setup>
import { ref, reactive, defineEmits } from 'vue';
import { DialogPlugin } from 'tdesign-vue-next';
import {get,post} from "@/utils/api";
import config from "@/config";
import {AddIcon, DeleteIcon} from "tdesign-icons-vue-next";
import {MessagePlugin} from "tdesign-vue-next";
// eslint-disable-next-line vue/no-setup-props-destructure
const { item } = defineProps({
  item: {
    type: Object,
    required: true,
  },
});
if(item!==undefined && item!=null){
  get(config.getTask,{task_id:item.id}).then(res=>{
    let data = res.data.data
    formData.id = item.id;
    formData.type = data.type;
    formData.taskName = data.title;
    formData.keywords = data.keywords[0];
    formData.count = data.num;
    formData.outCount = data.out_num;
    formData.systemPrompt = data.system_prompt;
    formData.userPrompt = data.user_prompt;
    formData.selectedAudioPlatform = data.audio_platform;
    formData.selectedVoice = parseInt(data.voice);
    formData.selectedVoiceModel = data.voice_model
    formData.selectedVideoPlatform = data.video_platform;
    formData.selectedVideo = parseInt(data.video);
    isAutoFb.value = formData.is_auto_fb = data.is_auto_fb === 1
    isAutoJjjb.value = formData.is_auto_jjjb = data.is_auto_jjjb === 1
    isAutoFbjb.value = formData.is_auto_fbjb = data.is_auto_fbjb === 1;
    formData.schedule_value = (data.schedule_value/60).toFixed(2);
    formData.total_count = data.total_count;
    formData.zdy_video_keywords = data.zdy_video_keywords;
    formData.date_ragne = [data.star_time,data.end_time]
    if(data.push_schedule!=null){
      schedule.value = data.push_schedule_arr
    }
    if(data.schedule_task!=null){
      schedule_task.value = data.schedule_task_arr
    }
    getVoices(data.audio_platform)
    getVideos(data.video_platform)
    if(data.audio_platform=="MINIMAX"){
      platformVoicesModel.value = [
        { label: "快速版V1", value: "speech-01-turbo" },
        { label: "快速版V2", value: "speech-02-turbo" },
        { label: "高保真V1版", value: "speech-01-hd" },
        { label: "高保真V2版", value: "speech-02-hd" },
      ];
    }

  })

}
console.log("item",item)



const currentStep = ref(0);
const platformVoices = ref([]);
const platformVideos = ref([]);
const audioPlatforms = ref([
  // { label: 'MINIMAX', value: 'MINIMAX' },
  { label: '标准', value: '蝉镜' },
  { label: '高清(功能努力开发中...)', value: 'MINIMAX' , disabled: true },
]);
const videoPlatforms = ref([
  { label: '标准', value: '小甲鱼' },
  // { label: '标准', value: '蝉镜' },
  { label: '高清(功能努力开发中...)', value: 'HeyGen', disabled: true },
    // { label: 'HeyGen', value: 'HeyGen' }
]);


//获取声音平台
// const getVoicePlatforms = () => {
//   get(config.getConfigList,{cat:3}).then(res=>{
//     console.log("getVoicePlatforms", res.data.data)
//     let data = res.data.data
//     audioPlatforms.value = []
//     for (let i = 0; i < data.length; i++) {
//       audioPlatforms.value.push({ label:data[i].name, value: data[i].id })
//     }
//   })
// }
// getVoicePlatforms()
const platformVoicesModel = ref([])
//声音平台切换事件
const selectAudioPlatform = (platform,context) => {
  console.log("selectAudioPlatform",platform)
  console.log("context",context)
  getVoices(platform)
  if(context.option.label=="MINIMAX"){
    platformVoicesModel.value = [
      { label: "快速版V1", value: "speech-01-turbo" },
      { label: "快速版V2", value: "speech-02-turbo" },
      { label: "高保真V1版", value: "speech-01-hd" },
      { label: "高保真V2版", value: "speech-02-hd" },
    ];
  }else{
    platformVoicesModel.value = [];
  }
};




//视频平台切换事件
const selectVideoPlatform = (platform) => {
  console.log("selectVideoPlatform",platform)
  getVideos(platform)
};

//获取对应平台声音模板
const getVoices = (platform) => {
  get(config.getVideoList,{type:1,platform_name:platform}).then(res=>{
    let data = res.data.data
    platformVoices.value = []
    platformVoices.value = [{ label:"根据文案情绪选择", value: 0}]
    for (let i = 0; i < data.length; i++) {
      platformVoices.value.push({ label:data[i].name, value: data[i].id })
    }
  })

}
//获取对应平台视频模板
const getVideos = (platform) => {
  get(config.getVideoList,{type:2,platform_name:platform}).then(res=>{
    console.log("getVideos", res.data.data)
    let data = res.data.data
    platformVideos.value = [];
    platformVideos.value = [{ label:"根据文案情绪选择", value: 0}]
    for (let i = 0; i < data.length; i++) {
      platformVideos.value.push({ label:data[i].name, value: data[i].id })
    }
  })

}





const steps = ['文案采集配置', 'AI改写设置', '音频配置', '视频配置','发布配置'];
const formData = reactive({
  taskName: '',
  keywords: '',
  count: '',
  defaultValue: '',
  systemPrompt: '# 角色定义\n'+
  '你是一位专业的热点内容口播文案创作专家，专门将热点话题转化为适合IP口播的优质文本内容。\n'+
   '## 核心能力\n'+
    '- 深度解析热点内容的核心要素和传播价值\n'+
    '- 创作符合口语化表达的生动文案\n'+
    '- 精准匹配内容情绪和播报风格\n'+
    '- 确保信息准确性和传播效果\n'+
    '## 工作流程\n'+

  '  ### 步骤1：内容分析\n'+
    '1. 解析用户提供的热点标题和描述\n'+
    '2. 识别内容类型、主题方向和情感基调\n'+
    '3. 评估内容的传播潜力和受众适配度\n'+

    '### 步骤2：信息核实\n'+
    '1. 涉及真实人物、事件时，核实信息准确性\n'+
    '2. 确保内容符合事实，避免误导性表述\n'+
    '3. 验证关键数据和时间节点\n'+

    '### 步骤3：文案创作\n'+
    '1. 使用通俗易懂的口语化表达\n'+
    '2. 构建清晰的逻辑结构和叙述节奏\n'+
    '3. 融入适当的情感色彩和互动元素\n'+
   ' 4. 确保内容生动有趣且易于理解\n'+

    '## 输出标准\n'+

    '### 内容要求\n'+
    '- **语言风格**：口语化、自然流畅、通俗易懂\n'+
    '- **逻辑结构**：层次分明、重点突出、节奏合理\n'+
    '- **情感表达**：真实自然、符合内容调性\n'+
   ' - **信息准确**：事实核实、数据可靠、表述客观\n'+
   ' -**数据导向**：内容开头吸引人停留，结尾可以促进人点赞\n'+

    '### 禁止内容\n'+
    '- 语气描述词（如"激动地说"、"沉重地叹息"）\n'+
    '- 音效提示（如"背景音乐响起"、"掌声"）\n'+
    '- 视频指示（如"画面切换"、"特效展示"）\n'+
    '- 情绪修饰语（如"愤怒地"、"开心地"）',
  userPrompt: '热点标题{{标题}} 热点描述{{描述}} 生成一段300字的口播文本',
  selectedModel: '',
  volume: 50,
  speed: 100,
  selectedAudioPlatform: '',
  selectedVoice: '',
  selectedVideoPlatform: '',
  selectedVideo: '',
  otherConfig: '',
  outCount:'',
  selectedVoiceModel:'',
  textSelect:'1',
  date_ragne:['08:00:00','22:00:00'],
  schedule_value:1,
  total_count:1,
});
const textSelect = ref([
      {
        label: '自动筛选',
        value: '1',
      },
      {
        label: '手动筛选',
        value: '2',
      }
]
)

const errors = reactive({
  taskName: ''
});
const systemVariables = ['{{标题}}', '{{描述}}'];

const insertSystemVariable = (variable) => {
  formData.systemPrompt += variable;
};
const insertUserVariable = (variable) => {
  formData.userPrompt += variable;
};
const validateStep = () => {
  errors.taskName = '';
  if (currentStep.value === 0 && !formData.taskName) {
    errors.taskName = '请输入任务名称';
    return false;
  }
  errors.keywords = '';
  if (currentStep.value === 0 && !formData.keywords) {
    errors.keywords = '请输入采集关键词';
    return false;
  }

  // errors.date_ragne = '';
  // if (currentStep.value === 0 && !formData.date_ragne) {
  //   errors.date_ragne = '请输入执行时间段';
  //   return false;
  // }
  // errors.schedule_value = '';
  // if (currentStep.value === 0 && !formData.schedule_value) {
  //   errors.schedule_value = '请输入每次执行间隔时长';
  //   return false;
  // }
  // errors.total_count = '';
  // if (currentStep.value === 0 && !formData.total_count) {
  //   errors.total_count = '请输入累计执行次数';
  //   return false;
  // }

  // errors.count = '';
  // if (currentStep.value === 4 && !formData.count) {
  //   errors.count = '请输入每次执行采集数量';
  //   return false;
  // }
  if(!isAutoJjjb.value && !isAutoFbjb.value){
    errors.outCount = '';
    if (currentStep.value === 4 && !formData.outCount) {
      errors.outCount = '请输入产出数量';
      return false;
    }
  }


  errors.systemPrompt = '';
  if (currentStep.value === 1 && !formData.systemPrompt) {
    errors.systemPrompt = '请输入系统提示词';
    return false;
  }

  errors.userPrompt = '';
  if (currentStep.value === 1 && !formData.userPrompt) {
    errors.userPrompt = '请输入用户提示词';
    return false;
  }

  errors.selectedAudioPlatform = '';
  if (currentStep.value === 2 && !formData.selectedAudioPlatform) {
    errors.selectedAudioPlatform = '请选择清晰度';
    return false;
  }

  // errors.selectedVoice = '';
  // if (currentStep.value === 2 && !formData.selectedVoice) {
  //   errors.selectedVoice = '请选择声音';
  //   return false;
  // }

  errors.selectedVoiceModel = '';
  if (currentStep.value === 2 && !formData.selectedVoiceModel &&  formData.selectedAudioPlatform==='MINIMAX') {
    errors.selectedVoiceModel = '请选择声音模型';
    return false;
  }

  errors.selectedVideoPlatform = '';
  if (currentStep.value === 3 && !formData.selectedVideoPlatform) {
    errors.selectedVideoPlatform = '请选择清晰度';
    return false;
  }

  // errors.selectedVideo = '';
  // if (currentStep.value === 3 && !formData.selectedVideo) {
  //   errors.selectedVideo = '请选择视频';
  //   return false;
  // }

  return true;
};
const emit = defineEmits(['close']);
const nextStep = () => {
  if (!validateStep()) return;
  if (currentStep.value < steps.length - 1) {
    currentStep.value++;
  } else {
  // 提交表单

    formData.type = 1
    formData.schedule = schedule.value;
    formData.schedule_task = schedule_task.value;
    if(isAutoJjjb.value || isAutoFbjb.value){
      formData.is_auto_fb = 1;
    }else{
      formData.is_auto_fb = 2
    }
    //formData.is_auto_fb = isAutoFb.value ? 1: 2;
    formData.is_auto_jjjb = isAutoJjjb.value ? 1: 2;
    formData.is_auto_fbjb = isAutoFbjb.value ? 1: 2;
    console.log('提交表单', formData);
    post(config.createTask, formData).then(response => {
      console.log(response);
      if (response.data.code === 1) {
        console.log('提交成功');
        // 关闭弹窗
        emit('close');
      } else {
        MessagePlugin.error(response.data.info)
        console.log('提交失败');
      }
    });
  }
};
const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};

const cancel = () => {
// 取消操作
  console.log('取消')

 // 关闭弹窗
  emit('close');

};

//发布配置相关
const schedule = ref([
    {
      target_device:[],
      schedule_type:2,
      schedule_value:'',
      schedule_time:[{
        time:['09:00:00','10:00:00'],
        push_num:1
      }],
      push_num:1,
      platform:[1]
    }
])
const platforms = ref([
  {
    label: '抖音',
    value: 1,
  },
  {
    label:'小红书',
    value: 2
  },
  {
    label: '微信视频号',
    value: 3,
  }

])



const devices = ref();
const deviceList = async () => {
  console.log("deviceList");
  try {
    const response = await get(config.getDeviceListGroup,{

    }); // Adjust API endpoint as needed
    if (response.status === 200) {
      devices.value  = response.data.data;
      console.log("deviceList",devices.value)
      // data.value = data;
    } else {
      console.error('Failed to fetch feedback data');
    }
  } catch (error) {
    console.error('Error fetching feedback data:', error);
  }


};
deviceList()
const schedule_types = ref([
  {
    label: '循环任务（次数）',
    value: 2,
  },
  {
    label: '每日任务',
    value: 1,
  },
])

//新增时间
const addTime = (key) => {
  schedule.value[key].schedule_time.push({
    time:[],
    push_num:1
  })
}

//删除时间
const removeTime = (key,index) => {
  schedule.value[key].schedule_time.splice(index,1)
}

//新增配置
const addSchedule = () => {
  schedule.value.push({
    target_device:[],
    schedule_type:2,
    schedule_value:'',
    schedule_time:[{
      time:[],
      push_num:1
    }],
    push_num:1
  })
}

//删除配置
const removeSchedule = (key) => {
  schedule.value.splice(key,1)
}

const isAutoFb = ref(false)
const isAutoJjjb = ref(false)
const isAutoFbjb = ref(false)

//执行配置相关
const schedule_task = ref(
    [
      ['09:00:00','10:00:00']
    ]
)

//新增时间
const addTaskTime = () => {
  schedule_task.value.push(['',''])
}

//删除时间
const removeTaskTime = (index) => {
  schedule_task.value.splice(index,1)
}

//提示词部分
const dialogPromptList = ref(false);
const promptList = ref([]);
const promptType = ref(1);
const dialogSavePrompt = ref(false)
const promptTitle = ref('')
const contentPromtpt = ref('')
const getPromptList = (type) =>{
  get(config.getPromptList,{
    type:type
  }).then(response => {
    promptType.value = type
    console.log("getPromptList",response);
    if (response.data.code === 1) {
      promptList.value = response.data.data
      dialogPromptList.value = true;
    } else {
      MessagePlugin.error(response.data.info)
    }
  });
}
const showSavePromtpt = (type,content) =>{
  promptType.value = type
  dialogSavePrompt.value = true
  contentPromtpt.value = content
}

const savePrompt = () =>{
  post(config.savePrompt,{
    title:promptTitle.value,
    type:promptType.value,
    content:contentPromtpt.value
  }).then(response => {
    console.log("savePrompt",response);
    if (response.data.code === 1) {
      MessagePlugin.success(response.data.info)
      dialogSavePrompt.value = false
      promptTitle.value = ''
    } else {
      MessagePlugin.error(response.data.info)
    }
  });
}
const insetPrompt = (content) =>{
  if(promptType.value===1){
    formData.systemPrompt = content
  }else{
    formData.userPrompt = content
  }
  dialogPromptList.value = false
}
const delPrompt = (index,id) =>{
  const confirmDia = DialogPlugin.confirm({
    body: '确认要删除吗?',
    confirmBtn: '确认',
    cancelBtn: '取消',
    onConfirm: ({ e }) => {
      console.log('e: ', e);
      get(config.delPrompt,{
        id:id
      }).then(response => {
        if (response.data.code === 1) {
          promptList.value.splice(index, 1);
          MessagePlugin.success(response.data.info)
          // 请求成功后，销毁弹框
          confirmDia.destroy();
        } else {
          MessagePlugin.error(response.data.info)
        }
      })

    },
    onClose: ({ e, trigger }) => {
      console.log('e: ', e);
      console.log('trigger: ', trigger);
      confirmDia.hide();
    },
  });

}

</script>
<style scoped>
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #2468F2;
  border-radius: 50%;
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #2468F2;
  border-radius: 50%;
  cursor: pointer;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bg-gray-800{
  background-color: rgb(50 53 56 / 50%);
}
.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(51 53 54);
}
.bg-blue-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 23 26);
}
</style>
